<?php
    $this->widget('ext.editor.CodeMirror.CodeMirrorWidget',array(
        'id'=>'Code_html',
        'syntax'=>array('clike','php','js','css','xml'),
        'theme'=>'ambiance'
    ));
    $this->widget('ext.idTabs.idTabsWidget');
?>

    <div class="idTabs" style="padding:0;margin:5px 0;">
      <ul>
        <li><a href="#html_editor">HTML</a></li>
        <li><a href="#css_editor">CSS</a></li>
        <!-- Try adding this <br/> tag here -->
        <li><a href="#js_editor">Javascript</a></li>
      </ul>
      <div class="items clear">    
        <div id="html_editor"><textarea id="Html_code" name="code" ></textarea></div>
        <div id="css_editor"><textarea id="Css_code"></textarea></div>
        <div id="js_editor"><textarea id="Js_code"></textarea></div>
      </div>
    </div>
  <script>

    
    var html_editor = CodeMirror.fromTextArea(document.getElementById("Html_code"), {
      lineNumbers: true,
      theme: "ambiance",
      mode:{name:"xml",alignCDATA:true},
      height:600,
      onChange:function(){
        updatePreview();
      },
      extraKeys: {
        "F9": function(cm) {
          setFullScreen(cm, !isFullScreen(cm));
        },
        "Esc": function(cm) {
          if (isFullScreen(cm)) setFullScreen(cm, false);
        }
      }
    });
    
    var js_editor = CodeMirror.fromTextArea(document.getElementById("Js_code"), {
      lineNumbers: true,
      theme: "ambiance",
      mode:'javascripte',
      onChange:function(){
        updatePreview();
      },
      extraKeys: {
        "F10": function(cm) {
          setFullScreen(cm, !isFullScreen(cm));
        },
        "Esc": function(cm) {
          if (isFullScreen(cm)) setFullScreen(cm, false);
        }
      }
    });
    
    var css_editor = CodeMirror.fromTextArea(document.getElementById("Css_code"), {
      lineNumbers: true,
      theme: "ambiance",
      mode:'css',
      onChange:function(){
        updatePreview();
      },
      extraKeys: {
        "F11": function(cm) {
          setFullScreen(cm, !isFullScreen(cm));
        },
        "Esc": function(cm) {
          if (isFullScreen(cm)) setFullScreen(cm, false);
        }
      }
    });
    
    function updatePreview() {    	
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        
        preview.open();
        preview.write(html_editor.getValue());
        preview.close();    
       
    	parallax.loadScript.cssFile('/public/css/main',preview,'css_file');
    	parallax.loadScript.css(css_editor.getValue(),preview,'css_code');
    	parallax.loadScript.jsFile('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', preview, 'js_file');
    	parallax.loadScript.js(js_editor.getValue(),preview, 'js_code');
    	
    	preview.appendChild(head);	
    	
    
    }   
        
 	$(function(){
		$(".idTabs").idTabs(true,location.hash);
	});
    
  </script>